<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  layout:decorate="~{/layout}">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>个人资料</title>
		<div th:replace="commons/css/css_personal::personal_css"></div>
		<link th:href="@{/personal/css/infstyle.css}" rel="stylesheet" type="text/css">
		<div th:replace="commons/css/css_header_footer :: public_css1"></div>
		<div th:replace="commons/js/js_header_footer :: public_js1"></div>
		<div th:replace="commons/js/js_personal::personal_js"></div>
		<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

			
	</head>

	<body>
		<!--头 -->
		<div th:replace="commons/header::public_header"></div>

		<!-- Preloader -->
		<div id="preloader" class="preloader">
			<div class="loader-cube">
				<div class="loader-cube__item1 loader-cube__item"></div>
				<div class="loader-cube__item2 loader-cube__item"></div>
				<div class="loader-cube__item4 loader-cube__item"></div>
				<div class="loader-cube__item3 loader-cube__item"></div>
			</div>
		</div>
		<!-- End Preloader -->
			<b class="line"></b>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-info">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small></div>
						</div>
						<hr/>

						<!--头像 -->
						<div class="user-infoPic">
							<input type="hidden" id="picPath" th:value="${user.picpath}">
							<div class="filePic">
								<form method="post" enctype="multipart/form-data">
								<input type="file"  id="file" name="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
									<div id="thisImage">

									</div>
									<!--<img class="am-circle am-img-thumbnail" th:src="@{/personal/images/getAvatar.do.jpg}" alt="" />-->
								</form>
							</div>

							<p class="am-form-help">头像</p>

							<div class="info-m">
								<div><b>用户名：<i><span th:text="${user.username}" id="username"></span></i></b></div>
								<div class="u-level">
									<span class="rank r2">
							             <s class="vip1"></s><a class="classes" href="#">铜牌会员</a>
						            </span>
								</div>
								<div class="u-safety">
									<a href="safety.html">
									 账户安全
									<span class="u-profile"><i class="bc_ee0000" style="width: 60px;" width="0">60分</i></span>
									</a>
								</div>
							</div>
						</div>

						<!--个人信息 -->
						<div class="info-main">
							<form id="editForm" class="am-form am-form-horizontal">
								<input type="hidden" id="user-id" name="userid" th:value="${user.userid}">
								<div class="form-group">
								<div class="am-form-group">
									<label for="user-name" class="am-form-label">姓名</label>
									<div class="am-form-content">
										<input type="text" id="user-name" name="username" placeholder="name"  th:value="${user.username}">
									</div>
								</div>
								</div>
								<div class="am-form-group">
									<label  class="am-form-label">注册时间</label>
									<div class="am-form-content">
										<input type="text" id="user-regtime"  readonly th:value="${#dates.format(user.regtime, 'yyyy-MM-dd HH:mm')}">
									</div>
								</div>
								<div class="form-group">
								<div class="am-form-group">
									<label for="user-phone" class="am-form-label">电话</label>
									<div class="am-form-content">
										<input id="user-phone" name="telephone" placeholder="telephonenumber" type="text" th:value="${user.telephone}">
									</div>
								</div>
								</div>
								<div class="form-group">
								<div class="am-form-group">
									<label for="user-email" class="am-form-label">电子邮件</label>
									<div class="am-form-content">
										<input id="user-email" placeholder="Email" name="email" type="text" th:value="${user.email}">
									</div>
								</div>
								</div>
								<div class="info-btn">
									<input type="button" class="am-btn am-btn-danger" id="save" value="保存修改">
									<!--<button class="am-btn am-btn-danger" id="save">保存修改</button>-->
								</div>

							</form>
						</div>

					</div>

				</div>
				<!--底部-->
				<div th:replace="commons/personal_footer::personal_footer"></div>
			</div>
			<!--左边菜单-->
			<div th:replace="commons/personal_footer::personal_menu"></div>
		</div>
	</body>
		<script>
            $(document).ready(function () {
                changeStatus();
                //显示头像
				var picPath = document.getElementById("picPath").value;
				if(picPath == null || picPath == ""){
				    var picPath = "/personal/images/getAvatar.do.jpg";
				    $("#thisImage").append($("<img/>").prop('id',"path").attr("src",picPath).addClass("am-circle am-img-thumbnail"));
				}
				else {
                    $("#thisImage").append($("<img/>").prop('id',"path").attr("src",/pictures/+picPath).addClass("am-circle am-img-thumbnail"));
				}

            })

            function changeStatus() {
                $("#li_information").addClass("active");
            }

			$("#save").click(function () {
                // 表单验证
                $('#editForm').bootstrapValidator({
                    message:'信息输入错误',
                    feedbackIcons:{
                        valid:'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields:{
                        username:{
                            validators:{
                                notEmpty:{
                                    message:'姓名不能为空'
                                }
                            }

                        },
                        telephone:{
                            validators:{
                                notEmpty:{
                                    message:'手机号不能为空'
                                },
                                regexp: {
                                    regexp: /^1\d{10}$/,
                                    message: '手机号格式错误'
                                }
                            }
						},
						email:{
                            validators:{
                                notEmpty:{
                                    message:'邮箱不能为空'
                                },
                                emailAddress: {
                                    message: '邮箱地址格式有误'
                                }
							}
						}

                    }

                });
                //校验数据
                $('#editForm').data('bootstrapValidator').validate();
                if(!$('#editForm').data('bootstrapValidator').isValid()){
                    return;
                }

			    var userid = $("#user-id").val();
			    var username = $("#user-name").val();
			    var email = $("#user-email").val();
			    var telephone = $("#user-phone").val();
				$.ajax({
					type:"POST",
					url:"/users/editUser",
					data:{
					    userid: userid,
						username: username,
                        email: email,
                        telephone: telephone,
                    },
                    success: function (data) {
                        $("#username").text(username);
                        swal(data.msg);
                    }
                });
            })

	//头像上传
	$("#file").change(function () {
		var animateimg = $("#file").val(); //获取上传的图片路径
		var imgarr = animateimg.split("\\");//分割
		var myimg = imgarr[imgarr.length-1]; //去掉 //获取图片名
		var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置
		var ext = myimg.substring(houzui,myimg.length).toUpperCase(); //切割.获取文件后缀
		var file = $('#file').get(0).files[0]; //获取上传的文件
		var fileSize = file.size; //获取上传文件的大小
		var maxSize = 1048576;
        if (ext != '.PNG' && ext != '.GIF' && ext != '.JPG' && ext != '.JPEG' && ext != '.BMP'){
            swal('文件类型错误，请上传图片类型');
            return false;
		}else if(parseInt(fileSize) >= parseInt(maxSize)){
            swal('上传的文件不能超过1MB');
            return false;
		}else{
            //上传请求
			var formData = new FormData();
			formData.append("file",file);
			$.ajax({
				type:"POST", //请求类型
				url: "/users/queryImg",
				data:formData,//请求参数
				contentType: false,
				processData: false,
				success : function (data) {
				    var user = data.info.user;
                    var picPath = user.picpath;
                    $("#path").attr("src",/pictures/+picPath);
                },
				error:function () {
					swal('修改头像失败');
                }
			});
		}
    })


	</script>
</html>